<template>
  <div class="brand-zone">
    <main-header></main-header>
    <div class="wrap">
      <div id="banner" class="f-c-c">
        <div class="f-fs-c">
          <img src="@/public/img/logo.jpg" />
          <h1>{{brandName}}专区</h1>
        </div>
      </div>
      <div class="f-sb-fs">
        <brand-series id="brand-series"></brand-series>
        <rank-list id="rank-list"></rank-list>
      </div>
    </div>
  </div>
</template>
<script>
import BrandSeries from "../components/section/BrandSeries.vue";
import RankList from "../components/section/RankList.vue";
import MainHeader from "../components/section/MainHeader.vue";
export default {
  name: "BrandZone",
  components: {
    MainHeader,
    BrandSeries,
    RankList,
  },
  data() {
    return {
      brandName: "XXX",
      currTab: "",
    };
  },
  mounted() {
    console.log(this.$route.params.id);
    let { brands } = this.$store.state.opts;
    this.brandName = brands.filter((item) => item.id == this.$route.params.id)[0].text;
  },
};
</script>
<style lang="scss" scoped>
.wrap{
  margin-bottom: 30px;
}
#banner {
  height: 200px;
  margin-bottom: 20px;
  border-radius: 0 0 $border-radius-base $border-radius-base;
  background: url(../assets/img/brand_zone_banner_bg.jpg) no-repeat 0 0/100%
    100%;
  img {
    height: 50px;
    margin-right: 20px;
  }
  h1 {
    color: #fff;
    font-size: 50px;
  }
}
#brand-series {
}
#rank-list {
}
</style>